<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<title>event高德地图</title>
	<style>
		*{margin:0;padding:0;}
		#container,#container1,#container2{width:1200px; min-height:800px;float:left;margin:10px;height:100%;}
	    .taiwan{ border: solid 1px red; color: red; float: left; width: 80px; background-color: rgba(255,0,0,0.1) }
	    #container1{display:none;}

	</style>
	<script src="http://webapi.amap.com/maps?v=1.4.0&key=68f1f7850d75a2c422f417cc77331395&plugin=AMap.DragRoute"></script>
	<script src="https://cdn.bootcss.com/jquery/3.2.1/jquery.js"></script>
</head>
<body>
	<div id="container"></div>
	<div id="tip"></div>
	<button>button</button>
</body>
</html>
<script>
	var provinces = [
		{ "name": "北京市", "center": "116.405285,39.904989", "type": 0, "subDistricts": [] }, 
		{ "name": "天津市", "center": "117.190182,39.125596", "type": 1, "subDistricts": [] }, 
		{ "name": "河北省", "center": "114.502461,38.045474", "type": 1, "subDistricts": [] }, 
		{ "name": "山西省", "center": "112.549248,37.857014", "type": 1, "subDistricts": [] }, 
		{ "name": "内蒙古自治区", "center": "111.670801,40.818311", "type": 1, "subDistricts": [] }, 
		{ "name": "辽宁省", "center": "123.429096,41.796767", "type": 1, "subDistricts": [] }, 
		{ "name": "吉林省", "center": "125.3245,43.886841", "type": 1, "subDistricts": [] }, 
		{ "name": "黑龙江省", "center": "126.642464,45.756967", "type": 1, "subDistricts": [] }, 
		{ "name": "上海市", "center": "121.472644,31.231706", "type": 1, "subDistricts": [] }, 
		{ "name": "江苏省", "center": "118.767413,32.041544", "type": 1, "subDistricts": [] }, 
		{ "name": "浙江省", "center": "120.153576,30.287459", "type": 1, "subDistricts": [] }, 
		{ "name": "安徽省", "center": "117.283042,31.86119", "type": 1, "subDistricts": [] }, 
		{ "name": "福建省", "center": "119.306239,26.075302", "type": 1, "subDistricts": [] }, 
		{ "name": "江西省", "center": "115.892151,28.676493", "type": 1, "subDistricts": [] }, 
		{ "name": "山东省", "center": "117.000923,36.675807", "type": 1, "subDistricts": [] }, 
		{ "name": "河南省", "center": "113.665412,34.757975", "type": 1, "subDistricts": [] }, 
		{ "name": "湖北省", "center": "114.298572,30.584355", "type": 1, "subDistricts": [] }, 
		{ "name": "湖南省", "center": "112.982279,28.19409", "type": 1, "subDistricts": [] }, 
		{ "name": "广东省", "center": "113.280637,23.125178", "type": 1, "subDistricts": [] }, 
		{ "name": "广西壮族自治区", "center": "108.320004,22.82402", "type": 1, "subDistricts": [] }, 
		{ "name": "海南省", "center": "110.33119,20.031971", "type": 1, "subDistricts": [] }, 
		{ "name": "重庆市", "center": "106.504962,29.533155", "type": 1, "subDistricts": [] }, 
		{ "name": "四川省", "center": "104.065735,30.659462", "type": 1, "subDistricts": [] }, 
		{ "name": "贵州省", "center": "106.713478,26.578343", "type": 1, "subDistricts": [] }, 
		{ "name": "云南省", "center": "102.712251,25.040609", "type": 1, "subDistricts": [] }, 
		{ "name": "西藏自治区", "center": "91.132212,29.660361", "type": 1, "subDistricts": [] }, 
		{ "name": "陕西省", "center": "108.948024,34.263161", "type": 1, "subDistricts": [] }, 
		{ "name": "甘肃省", "center": "103.823557,36.058039", "type": 1, "subDistricts": [] }, 
		{ "name": "青海省", "center": "101.778916,36.623178", "type": 1, "subDistricts": [] }, 
		{ "name": "宁夏回族自治区", "center": "106.278179,38.46637", "type": 1, "subDistricts": [] }, 
		{ "name": "新疆维吾尔自治区", "center": "87.617733,43.792818", "type": 1, "subDistricts": [] }, 
		{ "name": "台湾省", "center": "121.509062,25.044332", "type": 2, "subDistricts": [] }, 
		{ "name": "香港特別行政區", "center": "114.173355,22.320048", "type": 1, "subDistricts": [] }, 
		{ "name": "澳門特別行政區", "center": "113.54909,22.198951", "type": 1, "subDistricts": [] }
	];


/**

事件绑定的两种方法
	第一：
		事件绑定：
			on( eventName, handler, context) ：注册事件，给Map或者覆盖物对象注册事件
			eventName：事件名称（必填），
			handler：事件回调函数（必填），
			context：事件回调中的上下文（可选，缺省时，handler中this为调用on方法的对象本身，否则this指向context引用的对象）
			注意：多次绑定时，当eventName、handler函数对象、context对象有任意一个不一样就会再次绑定
		事件解绑：
			off( eventName, handler, context) ： 移除事件绑定
			eventName：事件名称（必填），
			handler：事件功能函数（必填），
			context：事件上下文（可选，缺省时为调用off方法的对象本身，否则为context引用的对象）
			注意：只有当off与on的eventName、handler函数对象、context对象完全一致时才能有效移除监听
	第二：
		事件绑定：
			( 1 ) addDomListener( instance, eventName, handler, context) 	
				返回值 ：EventListener
				注册DOM对象事件：给DOM对象注册事件，并返回eventListener。运行AMap.event.removeListener(eventListener)可以删除该事件的监听器。
				参数：
					instance：需注册事件的DOM对象（必填），
					eventName：事件名称（必填），
					handler：事件功能函数（必填），
					context：事件上下文（可选，缺省时，handler中this指向参数instance引用的对象，否则this指向context引用的对象）
		
			( 2 ) addListener( instance, eventName, handler, context)
				返回值 ：EventListener
				注册对象事件：给对象注册事件，并返回eventListener。运行AMap.event.removeListener(eventListener)可以删除该事件的监听器。
				参数：
					instance：需注册事件的对象（必填），
					eventName：事件名称（必填），
					handler：事件功能函数（必填），
					context：事件上下文（可选，缺省时，handler中this指向参数instance引用的对象，否则this指向context引用的对象） 
			( 3 ) addListenerOnce( instance, eventName, handler, context)
				返回值：EventListener 
				类似于addListener，但事件只会被触发一次，之后将自动移除。 
			( 4 ) removeListener( listener)
				删除由上述 event.addDomListener 和 event.addListener 传回的指定侦听器。
			( 5 ) trigger( instance, eventName, extArgs)
				触发非DOM事件 触发非DOM事件eventName时，extArgs将扩展到事件监听函数（handler）接受到的event参数中。
				如:在extArgs内写入{m:10,p:2}，eventName监听函数（handler）可以接收到包含m,p两个key值的event对象。





*/

	// 事件注册
	var map = new AMap.Map('container',{
		
	});
	var markerArr = [];
	// var myFn = function(){
	// 	console.log(this.getPosition( ))
	// 	console.log(this.getContent( ))
	// 	// console.log(this)
	// }
	// provinces.forEach(function(v){
	//     marker = new AMap.Marker({
	// 		position: v.center.split(','),
	//         map : map,

	//         content : v.name
	//     });
	//     markerArr.push(marker)
	//     marker.on('click',myFn);
	// });

	// document.querySelector('button').onclick = function(){
	// 	markerArr.forEach(function(v){
	// 		v.off('click',myFn);
	// 	});
	// };
	// on('click',function(){
	// 	alert(123)
	// });

	// console.log(marker);


	map.on('complete', function() {
        document.getElementById('tip').innerHTML = "地图图块加载完毕！当前地图中心点为：" + map.getCenter();
    });



    	var map = new AMap.Map('container',{resizeEnable: true,zoom:4});
        var markers = []; //province见Demo引用的JS文件
        for (var i = 0; i < provinces.length; i += 1) {
			var marker;
			if (provinces[i].type === 0) {
				marker = new AMap.Marker({
					icon:'https://vdata.amap.com/icons/b18/1/2.png',
					position: provinces[i].center.split(','),
					offset: new AMap.Pixel(-12,-12),
					zIndex: 101,
					title: provinces[i].name,
					map: map
				});
			} else {
            	marker = new AMap.Marker({
	              	position: provinces[i].center.split(','),
	              	title: provinces[i].name,
	              	map: map
	            });
	            if (provinces[i].type === 2) {
	              	var content= "<div class = 'taiwan'>宝岛台湾</div>";
	              	var baodao = new AMap.Marker({
	                	content: content,
	                	position: provinces[i].center.split(','),
	                	title: provinces[i].name,
	                	offset: new AMap.Pixel(0,0),
	                	map: map
	              	});
	              	map.setCenter(baodao.getPosition());
	            }
	        }
        	markers.push(marker);
        }

   











	








	
</script>
